<template>
    <div>
        <!--头部+banner-->
        <div class="a-1">
            <!--顶部导航-->
            <div class="a-2 h-5">
                <div class="a-3">
                    <Header v-bind:state=7></Header>
                </div>
            </div>
        </div>
        <!--个人中心-->
        <div class="h-1">
            <div class="h-2">
                <!--消息通知-->
                <div class="a-14 h-3">
                    <div class="a-15">
                        <img class="a-16" src="@/assets/image/user5.png" />
                        <div class="a-17">
                            <div class="swiper-container swiper-containerOne">
                                <div class="swiper-wrapper clearfix">
                                    <div class="swiper-slide">
                                        <div id="box">
                                            <ul id="con1" ref="con1" :class="{anim:animate==true}">
                                                <li v-for='item in items' :key="item.id">{{item.name}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--内容-->
                <div class="h-6">
                    <!--左边-->
                    <div class="h-7">
                        <div class="h-8">
                            <img class="h-9" src="@/assets/image/user18.png" />
                            <div class="h-10">徐爽爽爽</div>
                            <div class="h-11">湖北武汉</div>
                            <div class="h-12">资料完整度：</div>
                            <div class="h-13">
                                <span class="h-14"><span style="width: 60%;" class="h-15"></span></span>
                                <a href="javascript:;" class="h-16">完善></a>
                            </div>
                            <div class="h-17">
                                <div class="h-18 active">
                                    <img class="h-19" src="@/assets/image/user8.png" />
                                    <img class="h-20" src="@/assets/image/user8_on.png" />
                                    <div class="h-21">未认证</div>
                                    <div class="h-22">已认证</div>
                                </div>
                                <div class="h-18">
                                    <img class="h-19" src="@/assets/image/user12.png" />
                                    <img class="h-20" src="@/assets/image/user12_on.png" />
                                    <div class="h-21">未绑定</div>
                                    <div class="h-22">已绑定</div>
                                </div>
                                <div class="h-18">
                                    <img class="h-19" src="@/assets/image/user14.png" />
                                    <img class="h-20" src="@/assets/image/user14_on.png" />
                                    <div class="h-21">未绑定</div>
                                    <div class="h-22">已绑定</div>
                                </div>
                            </div>
                            <div class="h-23">
                                <a href="javascript:;" class="h-24" @click="switchType(0)">
                                    <router-link :to="{name: 'addTrading'}" class="h-24">添加挂牌</router-link>
                                </a>
                            </div>
                            <div class="h-25">已认证</div>
                        </div>
                        <ul class="h-26">
                            <router-link :to="{name: 'myTrading'}"><li :class="type==1?'active':''" @click="switchType(1)"><a href="javascript:;">我的挂牌</a></li></router-link>
                            <router-link :to="{name: 'myDelist'}"><li :class="type==2?'active':''" @click="switchType(2)"><a href="javascript:;">我的摘牌</a></li></router-link>
                            <router-link :to="{name: 'myContract'}"><li :class="type==3?'active':''" @click="switchType(3)"><a href="javascript:;">我的合同</a></li></router-link>
                            <router-link :to="{name: 'myContract'}"><li :class="type==4?'active':''" @click="switchType(4)"><a href="javascript:;">我的账单</a></li></router-link>
                            <router-link :to="{name: 'myCollection'}"><li :class="type==5?'active':''" @click="switchType(5)"><a href="javascript:;">我的收藏</a></li></router-link>
                            <router-link :to="{name: 'myInvoice'}"><li :class="type==6?'active':''" @click="switchType(6)"><a href="javascript:;">我的发票</a></li></router-link>
                            <router-link :to="{name: 'userInfoEdit'}"><li :class="type==7?'active':''" @click="switchType(7)"><a href="javascript:;">账户设置</a></li></router-link>
                            <router-link :to="{name: 'myNews'}"><li :class="type==8?'active':''" @click="switchType(8)"><a href="javascript:;">我的消息</a></li></router-link>
                        </ul>
                    </div>
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/views/header.vue';
    export default {
        components:{
            Header
        },
        name: "userIndex",
        data(){
            return {
                type:0,
                animate:false,
                items:[  //消息列表对应的数组
                    {id:1,name:"消息1消息1消息1消息1消息1消息1消息1消息1消息1消息1消息1消息1"},
                    {id:2,name:"消息2消息2消息2消息2消息2消息2消息2消息2消息2消息2消息2"},
                    {id:3,name:"消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3消息3"}
                ]
            }
        },
        created(){
            setInterval(this.scroll,5000);
        },
        methods:{
            switchType(e){
                this.type=e;
            },

            //消息滚动
            scroll(){
                let con1 = this.$refs.con1;
                con1.style.marginTop='-30px';
                this.animate=!this.animate;
                var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
                setTimeout(function(){
                    that.items.push(that.items[0]);
                    that.items.shift();
                    con1.style.marginTop='0px';
                    that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
                },5000)
            }
        }

    }
</script>

<style scoped>
    @import "../../css/index.css";
    @import "../../css/user_listing.css";
    @import "../../css/idangerous.swiper.css";
    /*消息滚动*/
    #box{
        width: 300px;
        height: 32px;
        line-height: 30px;
        overflow: hidden;
        padding-top:15px;
        padding-left: 30px;
        transition: all 0.5s;
    }
    .anim{
        transition: all 0.5s;
    }
    #con1 li{
        list-style: none;
        line-height: 30px;
        height: 30px;
    }
</style>
